<template>
  <div class='login-container'>
      <span class='login-title'>贸易跟单系统</span>
      <div class="login-line phone">
          <input type="text" placeholder="请输入注册手机号" v-model='phone'>
      </div>
      <div class="login-line pwd">
          <input type="text" placeholder="请输入验证码" v-model='vdtCode'>
          <span @click='getvdtCodeEvt' :class='{notAllow:timmer}'>{{vdtText}}</span>
      </div>
      <van-checkbox v-model="freeLogin">7天免登陆</van-checkbox>
      <van-button type="primary" block @click='userLogin' :loading='isLoading' loading-text='登陆中...'>登陆</van-button>
      <div class="login-copy">
        <span> design by zewen科技 &copy; 2020-</span>
      </div>
  </div>
</template>

<script>
import {getvdtCode,userLogin,getUserInfo,autoLogin} from '../../apis/userApi'
import {mapActions} from 'vuex'
  export default {
    data () {
      return {
        freeLogin:false,
        vdtText:'获取验证码',
        timmer:null,
        phone:"",
        vdtCode:"",
        isLoading:false
      };
    },
    async created(){
      let freeLogin = localStorage.getItem('freeLogin')
      if(!!freeLogin){
        //保存token
        this.saveToken(freeLogin)
        //自动登录接口获取用户信息
        let result = await autoLogin(freeLogin)
        //保存用户信息
        this.saveUserInfo(result.data)
        //跳转路由
        this.$router.push('/home')
      }
    },
    methods:{
      ...mapActions({
        saveToken:'common/saveToken',
        saveUserInfo:'common/saveUserInfo'
      }),
      async getvdtCodeEvt(){
        if(/^1[1-9]{1}[0-9]{9}$/.test(this.phone.trim())){
          if(this.vdtText!=='获取验证码')return
          let result = await getvdtCode(this.phone.trim())
          if(result.code===200){
            this.loopTime(Date.now())
            setTimeout(()=>{
              this.vdtCode=result.data.vdtCode
            },3000)
          }else{
            this.$toast.fail(result.message)
          }
        }else{
          this.$toast.fail(`请输入有效的号码`)
        }
      },
      loopTime(date){
        this.timmer=setTimeout(()=>{
          const disT=10-Math.floor((Date.now()-date)/1000)
          this.vdtText=`重新获取(${disT})`
          if(disT>0){
            this.loopTime(date)
          }else{
            this.vdtText=`获取验证码`
          }
        },200)

      },
      async userLogin(){
        if(!/^1[1-9]{1}[0-9]{9}$/.test(this.phone.trim())){
          this.$toast.fail('请输入有效手机号')
          return
        }
        if(!this.vdtCode.trim()){
          this.$toast.fail('请输入验证码')
          return
        }
        this.isLoading=true
        let result = await userLogin(this.phone.trim(),this.vdtCode.trim())
        if(result.code===200){
          //保存token
          let token = result.data.token
          this.saveToken(token)
          //获取用户信息
          let userInfo = await getUserInfo(result.data.id)
          //保存用户信息到vuex
          this.saveUserInfo(userInfo.data)
          //判断用户是否选择7天免登陆，来决定我们是否需要本地存储token
          if(this.freeLogin){
            localStorage.setItem('freeLogin',token)
          }
          this.$router.push('/home')
        }else{
          this.$toast.fail(result.message)
          this.isLoading=false
        }
      }
    },
  }

</script>
<style scoped lang='less'>
    @import './login.less';
</style>